<template>
	<view class="">
		<view class="">
		<u-search placeholder="储物收纳盒" v-model="keyword"
		 ></u-search>
		</view>
		<!-- 空白页 -->
		<view class="empty" v-if="list.length==0">
			<image src="https://xn-panda-test.oss-cn-hangzhou.aliyuncs.com/xiaochnegxu/cltynull.png" mode="aspectFit"></image>
			<view class="empty-tips">
				这里什么都没有哦~~
			</view>
		</view>
		<!-- 商品列表 -->
		<view class="cate-liket">
			<view class="cate-rietyon" v-for="(item,index) in list" :key="index">
				<image class="cate-comig" :src="item.mainImages[0]" mode="" @click="sanpot(item)"></image>
				<span class="cate-conspan">{{item.title}}</span>
				<view>
					<span class="caty-ide">￥{{item.minCostPrice}}</span>
					<!-- <van-icon class="caty-opint" size="18" name="shopping-cart-o" color="#fff"  @click="gouwu(item)"/> -->
					<image class="caty-opint" src="@/static/temp/gouwuc.png" @click="gouwu(item)"></image>
					<van-icon class="caty-vant" size="21" color="#8a8a8a" name="star-o" v-if="list[index].favorites == false" @click="onClickcollect(item)"/>
					<van-icon class="caty-vant" size="21" color="#ff7144" name="star" v-else @click="cancelollect(item)"/>
					
				</view>
				<view class="caty-act">
					{{item.holdUserName}}  
					<van-icon class="caty-opitu" name="arrow"/>
				</view>
				<!-- 弹出框 -->
				<u-popup :show="show" mode="bottom" :duration="200" :closeable="true" :overlayOpacity="0.3" @close="close" @open="open">
				    <addition @onchange="onchange" :childata="childata"></addition>
				 </u-popup>
			</view>
			<!-- 购物车 -->
				<van-icon class="caty-houwu" name="shopping-cart-o" @click="shopping" size="24px" :info="act" color="#ff7144"/>
		</view>
		 <van-loading id="demo" class="actoue" v-show="siopen" size="21px" type="spinner">加载中...</van-loading>
	</view>
</template>

<script> 
	import Api from '@/http/api.js'
	import roles from '@/http/roles.js'
	import addition from '@/package/commodity/components/addition.vue'
	export default{
		components:{ addition },
		data(){ 
			return{
				childata:{},
				city:'',
				chateh:'',
				keyword:'',
				siopen:false,
				show:false,
				q:{
					index:1,
					size:10,
					searchText:'',
					region:{
						province:'',
						city:'',
						county:''
					},
					categories:[
						{    
							id:'',
							desc:'',
							level:1
						}
					],
				},  
				list:[],
				info:{
					commodityId:'',  
					specId:'',
					specName:'',
					specPrice:'',
					specNumber:''
				},
				x:{
					commodityId:'',
					specId:'',
					initSpecNumber:1
				},
			} 
		},
		onLoad(option) {
			this.keyword = option.text
			this.searchText = this.keyword   
			this.q.categories = JSON.parse(option.classify)
			this.loached()
			this.logac()
		},
		methods:{
			async loached(){
				this.chateh = wx.getStorageSync('chateh')
				  this.city = wx.getStorageSync('city')
				  if(this.city != ''){
					  this.q.region = this.city
				  } else{
					  this.q.region = this.chateh
				  }
				const res = await Api.merchandise(this.q)
				this.list = res.data.data
				console.log(this.list)
			},
			// 购物车列表
			async logac(){
				let arr = []
				const ret = await Api.trolley(this.z)
				for(let i = 0; i < ret.data.length; i++){
					arr.push(ret.data[i].commodities.length)
				}
				let sum = 0
				arr.forEach(item =>{  
				   sum = sum + item
				})
					this.act = sum
					
			}, 
		
			// 跳转购物车
				shopping(){
					uni.navigateTo({
						url:'/pages/cart/cart'
					})
				},
			// 跳转商品详情
			sanpot(item){
			   uni.navigateTo({
			   	url: `/pages/cart/loginest?id=`+item.commodityId,
			   })
			},
			// 加入购物车
			async gouwu(item){
				// console.log(item)
				if(item.specs.length == 1){  
				this.x.commodityId = item.commodityId
				this.x.specId = item.specs[0].commoditySpecId
				const res = await Api.addshopping(this.x)
					if(res.code == 200){
						this.$api.msg('商品已添加至购物车');
					} else{
						this.$api.msg('添加失败请重新添加');
					}
					} else {
					  this.childata = item
			          this.show = true
			        }
				this.logac()
			},
			// 关闭弹窗
			close(){   
				this.show = false
			},
			async open(){
				  this.show = true
			 },
			onchange(){
				this.show = false
			},
			// 收藏
			async onClickcollect(item){
			    this.info.commodityId = item.commodityId
			    this.info.specId = item.specs[0].commoditySpecId
				this.info.specName = item.specs[0].name
				this.info.specPrice = item.specs[0].platformPrice
				const res = await Api.collection(this.info)
				this.loached();
			
			 },
			 // 取消收藏
			 async cancelollect(item){
				 const rect = await Api.canceltion({specId:item.specs[0].commoditySpecId,commodityId:item.commodityId})
				 this.loached();
			 },
		}
	}
</script>

<style lang="scss">
	// 商品列表
	.cate-liket{
		background-color:#f5f5f5;
		margin-top: 35rpx;
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		padding: 0 32upx;
		.cate-rietyon{
			width: 48%;
			height: auto;
			background-color: #FFFFFF;
			margin-bottom: 45upx;
			border-radius: 20rpx !important;
			padding-bottom: 10rpx;
		
		}
		.cate-comig{
			width: 100%;
			height: 350upx;
			border-top-left-radius:20rpx;
			border-top-right-radius:20rpx;
		}
		.caty-ide{
			color: #ff7144;
			margin-left: 20rpx;
			margin-bottom: 10rpx;
		}
		.cate-conspan{
			display: -webkit-box;
		
		    color: #1d1d1d;
			font-size: 24rpx;
			margin-left: 20rpx;
			margin-right: 20rpx;
			margin-bottom: 10rpx;
			line-height: 28rpx;
			font-weight: 500;
			overflow:hidden;
			-webkit-line-clamp: 2; /* 能够显示的最大行数 */
		    -webkit-box-orient: vertical; 
		}
		.cate-image{
			height: 45rpx;
			width: 45rpx;
			border-radius: 50%;
		    margin-left: 20rpx;
		}
		.caty-opint{
			float: right;
			width: 45upx;
			height: 45upx;
			margin-right: 20upx;
		}
		.caty-vant{
			background-color: #f7f7f7;
		    float: right;
			width: 45upx;
			height: 45upx;
			border-radius: 50%;
			margin-right: 25upx;
		}
		.caty-act{
			background-color:#f7f7f7;
			height:30upx;
			font-size: 24upx;
			margin: 20upx;
			padding-left: 10upx;
			padding-right: 15upx;
			border-radius: 15upx;
		}
		.caty-opitu{
			float: right;
			transform: translateY(30%);
		}
		}
		.caty-houwu{
			position: fixed;
			right: 30rpx;
			bottom: 170rpx;
			width: 75upx;
			height: 75upx;
			background-color: #FFFFFF;
			border-radius: 50%;
		}
		// 加载
		.actoue{
			margin-left: 40%;
		}
		// 弹出框
		.u-transition{
			height: 60% !important;
		}
		// 空白页
			.empty{
					
				overflow: none;
			
				width: 100%;
				height: 100vh;
				padding-bottom:100upx;
				display:flex;
				justify-content: center;
				flex-direction: column;
				align-items:center;
				background: #fff;
				image{
					width: 240upx;
					height: 160upx;
					margin-bottom:30upx;
				}
				.empty-tips{
					display:flex;
					font-size: $font-sm+2upx;
					color: $font-color-disabled;
					.navigator{
						color: $uni-color-primary;
						margin-left: 16upx;
					}
					}
					}
					
</style>